<template>
  <h1>watch</h1>
  <div>{{ nickname }}</div>
  <div>{{ age }}</div>
</template>

<script>
import { defineComponent, ref, reactive, toRefs, watch } from 'vue'
export default defineComponent({
  setup() {
    const state = reactive({ nickname: 'xiaofan', age: 20 })
    const year = ref(0)
    setTimeout(() => {
      state.age++
      year.value++
    }, 1000)

    // // 修改age值时会触发 watch的回调
    // watch(
    //   () => state.age,
    //   (curAge, preAge) => {
    //     console.log('新值:', curAge, '老值:', preAge)
    //     //新值: 21 老值: 20
    //   }
    // )

    watch([() => state.age, year], ([curAge, newVal], [preAge, oldVal]) => {
      console.log('age新值:', curAge, 'age老值:', preAge)
      console.log('year新值:', newVal, 'year老值:', oldVal)
      // age新值: 21 age老值: 20
      // year新值: 1 year老值: 0
    })
    return {
      ...toRefs(state)
    }
  }
})
</script>

<style>
</style>